<template>
  <div class="image">
    <!-- <el-upload
      class="upload-demo"
      :action="serveHost + '/admin/xy/upload/uploadImg'"
      :file-list="fileList"
      :on-success="onUploadSucc"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <img :src="tempImg" alt="" />
    </el-upload> -->

    <el-card class="image-header" shadow="hover">
      <div slot="header" class="clearfix">
        <span>搜索</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
            @click="find"
            v-model="title"
            placeholder="请根据图片标题进行查询"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-button>重置</el-button>
          <el-button type="primary">查询</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="image-container" shadow="never">
      <div slot="header" class="clearfix">
        <span>图片管理</span>
        <el-upload
          class="upload-demo"
          :action="serveHost + '/admin/xy/upload/uploadImg'"
          :file-list="fileList"
          :on-success="onUploadSucc"
          :headers = "headers"
        >
          <el-button style="float: right;" size="small" type="primary"
            >点击上传</el-button>
          <!-- <el-input v-model="title"></el-input> -->
          <!-- <img :src="tempImg" alt="" /> -->
        </el-upload>
      </div>

      <el-row :gutter="20" class="row">
        <el-col :span="6" v-for="item in imgList" :key="item.id">
          <el-card shadow="hover" style="margin-top:10px">
            <p>{{ item.title ? item.title : "未命名" }}</p>
            <img
              :src="serveHost + '/' + item.dir + '/' + item.fileName"
              alt=""
            />
            <el-button type="primary" size="small" @click="delImage(item.id)">删除</el-button>
            <el-button type="primary" size="small" @click="updateImage">更新</el-button>
            <el-input 
              v-if="isShow"
              placeholder="更新图片标题"
              v-model="title"
              @change="updatetit(item.id)"
            ></el-input>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <div class="block">
      <!-- <span class="demonstration">分页</span> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import settingsFile from "@/settings";
import axios from "axios";
import {getToken} from "@/utils/myAuth"
import {
  uploadList,
  uploadDel,
  updateTitle,
  uploadImg
} from "@/api/material/img";
export default {
  data() {
    return {
      isShow:false,
      title: "",
      serveHost: settingsFile.host,
      tempImg: "",
      fileList: [],
      imgList: [],
      page: {
        start: 1,
        limit: 16,
        sizes: [16, 24, 30, 36],
        totalCount: 0
      }
    };
  },
  computed:{
    headers() {
      return {
        "bufan-Token": getToken()
      }
    }
  },
  
  methods: {
    onUploadSucc(response, file, fileList) {
      console.log(response);
      this.tempImg = this.serveHost + "/" + response.url;
      console.log(this.tempImg);
      this.$message.success("上传成功");
      this.$refs.upload.clearFiles();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.limit = val;
      this.initUploadList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.start = val;
      // console.log(this.page.start);
      this.initUploadList();
    },
    initUploadList() {
      uploadList({
        start: this.page.start,
        limit: this.page.limit
      }).then(res => {
        console.log(res);
        this.imgList = res.data.list;
        // this.imgList .forEach(el => {
        //     el.isShow = false;
        // });
        console.log(this.imgList);
        this.page.totalCount = res.data.totalRow;
        // this.title = res.data.list.title;
      });
    },
    // 删除
    delImage(id) {
      this.$confirm("确认删除？")
        .then(_ => {
          uploadDel({ id }).then(res => {
            console.log(res);
            this.$message.success("删除成功");
            this.initUploadList();
          });
        })
        .catch(_ => {});
    },
    // 查找
    find() {
      this.page.start = 1;
      this.initUploadList();
    },
    // 上传
    onUploadSucc(response, file, fileList) {
      console.log(response);
      // tempImg = this.serveHost + "/" + response.url;
      this.$message.success("上传成功");
      //清除进度条
      // this.$refs.upload.clearFiles();
      this.initUploadList();
    },
    // 更新
    updateImage() {
        this.isShow = true;
    },
    updatetit(id) {
        updateTitle({
          id: id,
          title: this.title
        }).then(res => {
          console.log(res);
          this.title = "";
          this.isShow = false;
          this.initUploadList();
        });   
    },
    // blur(){
    //     this.isShow = false;
    // }
  },
  created() {
    this.initUploadList();
  }
};
</script>

<style lang="scss" scoped>
.image-header {
  margin: 30px;
}
.image-container {
  margin: 30px;
  .el-row {
    display: flex;
    flex-wrap: wrap;
  }
  img {
    width: 240px;
    height: 120px;
    border-radius: 20px;
    margin-bottom: 10px;
  }
}
.block {
  margin: 20px;
  text-align: right;
}
</style>
